<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>13.梯型标签页</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <script>
  /*
    难点：设计一个梯型

    一、利用 CSS 中用 3D 旋转

      1. 采用 3D 形变之后，内部是无法逆转的，所以采用伪类
        形变之后垂直方向上会缩水，所以再做放大处理

        .div1:before {
          content: '';
          position: absolute; 
          top: 0; right: 0; bottom: 0; left: 0;
          transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
          transform-origin: bottom;
        }
  
      2. 标签页

        nav > a:before {
          content: '';
          position: absolute;
          transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
          transform-origin: bottom;
        }

        nav.left > a:before {
          transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
          transform-origin: bottom left;
        }
  
  */
  </script>

  <style>
    .div1 {
      display: inline-block;
      position: relative;
      padding: .3em 1em 0;
      margin: 0 -.3em;
      color: white;
    }

    .div1:before {
      content: '';
      position: absolute; 
      top: 0; right: 0; bottom: 0; left: 0; 
      z-index: -1; 
      background: #58a;
      transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
      transform-origin: bottom;
    }

    body {
      padding: 40px;
      font: 120% Frutiger LT Std, sans-serif;
      line-height: 2;
    }

    nav {
      display: inline-block;
      position: relative;
      z-index: 1;
      margin-left: 1em;
    }

    nav > a {
      position: relative;
      display: inline-block;
      padding: .3em 1em 0;
      color: inherit;
      text-decoration: none;
      margin: 0 -.3em;
    }

    nav > a:before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      border-radius: .5em .5em 0 0;
      border: .1em solid rgba(0,0,0,.4);
      border-bottom: none;
      background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
      box-shadow: 0 .15em white inset;
      transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
	    transform-origin: bottom;
    }

    nav a.selected {
      z-index: 10;
    }

    nav a.selected:before {
      background-color: #eee;
      margin-bottom: -.08em;
    }

    main {
      min-height: 8em;
      margin-bottom: 1em;
      background: #eee;
      padding: 1em;
      border-radius: .15em;
      border: .1em solid rgba(0,0,0,.4);
    }
  
    nav.left > a:before {
      transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
	    transform-origin: bottom left;
    }

    nav.right {
      padding-left: 2em;
    }

    nav.right > a::before {
      transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
      transform-origin: bottom right;
    }
  </style>
</head>
<body>
  <div class="div1">伪类梯型</div>
  <br /><br />
  <nav class="default">
    <a href="#ch">Home</a>
    <a href="#cp" class="selected">Projects</a>
    <a href="#ca">About</a>
  </nav>
  <main>Default Content Projects</main>
  <br /><br />
  <nav class="left">
    <a href="#lh">Home</a>
    <a href="#lp">Projects</a>
    <a href="#la" class="selected">About</a>
  </nav>
  <main>Left Content About</main>
  <br /><br />
  <nav class="right">
    <a href="#rh" class="selected">Home</a>
    <a href="#rp">Projects</a>
    <a href="#ra">About</a>
  </nav>
  <main>Right Content Home</main>
  
  <script src="./js/util.js"></script>
  <script src="./js/13.tab.js"></script>
</body>
</html>